<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flat UI Free</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Loading Bootstrap -->
<link href="../../dist/css/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">

<!-- Loading Flat UI -->
<link href="../../dist/css/flat-ui.css" rel="stylesheet">

<link rel="shortcut icon" href="../../dist/img/favicon.ico">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
      <script src="../../dist/js/vendor/html5shiv.js"></script>
      <script src="../../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
</head>
<body>

	<style>
body {
	padding-bottom: 200px;
}
</style>

	<div class="container">
		<h4>Buttons</h4>
		<div class="row">
			<div class="col-md-12">
				<p>
					<!-- Standard gray button with gradient -->
					<button type="button" class="btn btn-default">Default</button>

					<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
					<button type="button" class="btn btn-primary">Primary</button>

					<!-- Indicates a successful or positive action -->
					<button type="button" class="btn btn-success">Success</button>

					<!-- Contextual button for informational alert messages -->
					<button type="button" class="btn btn-info">Info</button>

					<!-- Indicates caution should be taken with this action -->
					<button type="button" class="btn btn-warning">Warning</button>

					<!-- Indicates a dangerous or potentially negative action -->
					<button type="button" class="btn btn-danger">Danger</button>

					<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
					<button type="button" class="btn btn-link">Link</button>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
					<button type="button" class="btn btn-primary btn-hg">Huge
						button</button>
					<button type="button" class="btn btn-default btn-hg">Huge
						button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-lg">Large
						button</button>
					<button type="button" class="btn btn-default btn-lg">Large
						button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary">Default
						button</button>
					<button type="button" class="btn btn-default">Default
						button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-sm">Small
						button</button>
					<button type="button" class="btn btn-default btn-sm">Small
						button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-xs">Extra
						small button</button>
					<button type="button" class="btn btn-default btn-xs">Extra
						small button</button>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
					<button type="button" class="btn btn-primary btn-lg btn-block">Block
						level button</button>
					<button type="button" class="btn btn-default btn-lg btn-block">Block
						level button</button>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
					<button type="button" class="btn btn-lg btn-primary"
						disabled="disabled">Primary button</button>
					<button type="button" class="btn btn-default btn-lg"
						disabled="disabled">Button</button>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
					<a class="btn btn-default" href="#">Link</a>
					<button class="btn btn-default" type="submit">Button</button>
					<input class="btn btn-default" type="button" value="Input">
					<input class="btn btn-default" type="submit" value="Submit">
				</p>
			</div>
		</div>
		<h4>Button Groups</h4>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-group">
					<button type="button" class="btn btn-default">Left</button>
					<button type="button" class="btn btn-default">Middle</button>
					<button type="button" class="btn btn-default">Right</button>
				</div>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn btn-default" type="button">1</button>
						<button class="btn btn-default" type="button">2</button>
						<button class="btn btn-default" type="button">3</button>
						<button class="btn btn-default" type="button">4</button>
					</div>
					<div class="btn-group">
						<button class="btn btn-default" type="button">5</button>
						<button class="btn btn-default" type="button">6</button>
						<button class="btn btn-default" type="button">7</button>
					</div>
					<div class="btn-group">
						<button class="btn btn-default" type="button">8</button>
					</div>
				</div>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-toolbar">
					<div class="btn-group btn-group-lg">
						<button class="btn btn-default" type="button">Left</button>
						<button class="btn btn-default" type="button">Middle</button>
						<button class="btn btn-default" type="button">Right</button>
					</div>
				</div>
				</p>
				<p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn btn-default" type="button">Left</button>
						<button class="btn btn-default" type="button">Middle</button>
						<button class="btn btn-default" type="button">Right</button>
					</div>
				</div>
				</p>
				<p>
				<div class="btn-toolbar">
					<div class="btn-group btn-group-sm">
						<button class="btn btn-default" type="button">Left</button>
						<button class="btn btn-default" type="button">Middle</button>
						<button class="btn btn-default" type="button">Right</button>
					</div>
				</div>
				</p>
				<p>
				<div class="btn-toolbar">
					<div class="btn-group btn-group-xs">
						<button class="btn btn-default" type="button">Left</button>
						<button class="btn btn-default" type="button">Middle</button>
						<button class="btn btn-default" type="button">Right</button>
					</div>
				</div>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-group">
					<button class="btn btn-default" type="button">1</button>
					<button class="btn btn-default" type="button">2</button>

					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-default dropdown-toggle" type="button"
							id="btnGroupDrop1">
							Dropdown <span class="caret"></span>
						</button>
						<ul aria-labelledby="btnGroupDrop1" role="menu"
							class="dropdown-menu">
							<li><a href="#">Dropdown link</a></li>
							<li><a href="#">Dropdown link</a></li>
						</ul>
					</div>
				</div>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-group-vertical">
					<button class="btn btn-default" type="button">Button</button>
					<button class="btn btn-default" type="button">Button</button>
					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-default dropdown-toggle" type="button"
							id="btnGroupVerticalDrop1">
							Dropdown <span class="caret"></span>
						</button>
						<ul aria-labelledby="btnGroupVerticalDrop1" role="menu"
							class="dropdown-menu">
							<li><a href="#">Dropdown link</a></li>
							<li><a href="#">Dropdown link</a></li>
						</ul>
					</div>
					<button class="btn btn-default" type="button">Button</button>
					<button class="btn btn-default" type="button">Button</button>
					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-default dropdown-toggle" type="button"
							id="btnGroupVerticalDrop2">
							Dropdown <span class="caret"></span>
						</button>
						<ul aria-labelledby="btnGroupVerticalDrop2" role="menu"
							class="dropdown-menu">
							<li><a href="#">Dropdown link</a></li>
							<li><a href="#">Dropdown link</a></li>
						</ul>
					</div>
					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-default dropdown-toggle" type="button"
							id="btnGroupVerticalDrop3">
							Dropdown <span class="caret"></span>
						</button>
						<ul aria-labelledby="btnGroupVerticalDrop3" role="menu"
							class="dropdown-menu">
							<li><a href="#">Dropdown link</a></li>
							<li><a href="#">Dropdown link</a></li>
						</ul>
					</div>
					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-default dropdown-toggle" type="button"
							id="btnGroupVerticalDrop4">
							Dropdown <span class="caret"></span>
						</button>
						<ul aria-labelledby="btnGroupVerticalDrop4" role="menu"
							class="dropdown-menu">
							<li><a href="#">Dropdown link</a></li>
							<li><a href="#">Dropdown link</a></li>
						</ul>
					</div>
				</div>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-group btn-group-justified">
					<a class="btn btn-default" href="#">Left</a> <a
						class="btn btn-default" href="#">Middle</a> <a
						class="btn btn-default" href="#">Right</a>
				</div>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<a href="#fakelink" class="btn btn-primary"><i
							class="fui-list-columned"></i></a> <a href="#fakelink"
							class="btn btn-primary"><i class="fui-list-numbered"></i></a> <a
							href="#fakelink" class="btn btn-primary active"><i
							class="fui-list-thumbnailed"></i></a> <a href="#fakelink"
							class="btn btn-primary"><i class="fui-list-small-thumbnails"></i></a>
					</div>
				</div>
				</p>
			</div>
		</div>
		<h4>Button dropdowns</h4>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-group">
					<button data-toggle="dropdown"
						class="btn btn-default dropdown-toggle" type="button">
						Default <span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button data-toggle="dropdown"
						class="btn btn-primary dropdown-toggle" type="button">
						Primary <span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button data-toggle="dropdown"
						class="btn btn-success dropdown-toggle" type="button">
						Success <span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button data-toggle="dropdown" class="btn btn-info dropdown-toggle"
						type="button">
						Info <span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button data-toggle="dropdown"
						class="btn btn-warning dropdown-toggle" type="button">
						Warning <span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button data-toggle="dropdown"
						class="btn btn-danger dropdown-toggle" type="button">
						Danger <span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-group">
					<button class="btn btn-default" type="button">Default</button>
					<button data-toggle="dropdown"
						class="btn btn-default dropdown-toggle" type="button">
						<span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button class="btn btn-primary" type="button">Primary</button>
					<button data-toggle="dropdown"
						class="btn btn-primary dropdown-toggle" type="button">
						<span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button class="btn btn-success" type="button">Success</button>
					<button data-toggle="dropdown"
						class="btn btn-success dropdown-toggle" type="button">
						<span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button class="btn btn-info" type="button">Info</button>
					<button data-toggle="dropdown" class="btn btn-info dropdown-toggle"
						type="button">
						<span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button class="btn btn-warning" type="button">Warning</button>
					<button data-toggle="dropdown"
						class="btn btn-warning dropdown-toggle" type="button">
						<span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<button class="btn btn-danger" type="button">Danger</button>
					<button data-toggle="dropdown"
						class="btn btn-danger dropdown-toggle" type="button">
						<span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown" type="button"
							class="btn btn-default btn-hg dropdown-toggle">
							Huge button <span class="caret"></span>
						</button>
						<ul role="menu" class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /btn-group -->
				</div>
				<!-- /btn-toolbar -->
				</p>
				<p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown" type="button"
							class="btn btn-default btn-lg dropdown-toggle">
							Large button <span class="caret"></span>
						</button>
						<ul role="menu" class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /btn-group -->
				</div>
				<!-- /btn-toolbar -->
				</p>
				<p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown" type="button"
							class="btn btn-default btn-sm dropdown-toggle">
							Small button <span class="caret"></span>
						</button>
						<ul role="menu" class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /btn-group -->
				</div>
				<!-- /btn-toolbar -->
				</p>
				<p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown" type="button"
							class="btn btn-default btn-xs dropdown-toggle">
							Extra small button <span class="caret"></span>
						</button>
						<ul role="menu" class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /btn-group -->
				</div>
				<!-- /btn-toolbar -->
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>
				<div class="btn-toolbar">
					<div class="btn-group dropup">
						<button class="btn btn-default" type="button">Dropup</button>
						<button data-toggle="dropdown"
							class="btn btn-default dropdown-toggle" type="button">
							<span class="caret"></span>
						</button>
						<ul role="menu" class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /btn-group -->
					<div class="btn-group dropup">
						<button class="btn btn-primary" type="button">Right
							dropup</button>
						<button data-toggle="dropdown"
							class="btn btn-primary dropdown-toggle" type="button">
							<span class="caret"></span>
						</button>
						<ul role="menu" class="dropdown-menu pull-right">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /btn-group -->
				</div>
				</p>
			</div>
		</div>
	</div>
	<!-- /.container -->

</body>
</html>
